<template>
  <div class="p-6">
    <div class="flex justify-between items-center mb-6">
      <h1 class="text-2xl font-bold">退款订单</h1>
    </div>

    <!-- 搜索栏 -->
    <a-card class="mb-6">
      <a-form layout="inline" :model="searchForm">
        <a-form-item label="退款单号">
          <a-input v-model:value="searchForm.id" placeholder="请输入退款单号" />
        </a-form-item>
        <a-form-item label="原订单号">
          <a-input v-model:value="searchForm.paymentOrderId" placeholder="请输入原订单号" />
        </a-form-item>
        <a-form-item label="商户名称">
          <a-input v-model:value="searchForm.merchantName" placeholder="请输入商户名称" />
        </a-form-item>
        <a-form-item label="退款状态">
          <a-select v-model:value="searchForm.status" style="width: 120px">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="pending">退款中</a-select-option>
            <a-select-option value="success">退款成功</a-select-option>
            <a-select-option value="failed">退款失败</a-select-option>
            <a-select-option value="cancelled">已取消</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="支付方式">
          <a-select v-model:value="searchForm.paymentMethod" style="width: 120px">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="alipay">支付宝</a-select-option>
            <a-select-option value="wechat">微信支付</a-select-option>
            <a-select-option value="bank">银行卡</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="handleSearch">
            <template #icon><search-outlined /></template>
            搜索
          </a-button>
          <a-button class="ml-2" @click="handleReset">
            <template #icon><reload-outlined /></template>
            重置
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>

    <!-- 订单列表 -->
    <a-card>
      <a-table
        :columns="columns"
        :data-source="tableData"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
        :scroll="{ x: 1600 }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'refundAmount'">
            <span class="font-medium text-red-500">¥{{ record.refundAmount.toFixed(2) }}</span>
          </template>
          <template v-if="column.key === 'originalAmount'">
            <span class="font-medium">¥{{ record.originalAmount.toFixed(2) }}</span>
          </template>
          <template v-if="column.key === 'status'">
            <a-tag :color="statusMap[record.status as keyof typeof statusMap].color">
              {{ statusMap[record.status as keyof typeof statusMap].text }}
            </a-tag>
          </template>
          <template v-if="column.key === 'paymentMethod'">
            <a-tag>
              {{ paymentMethodMap[record.paymentMethod as keyof typeof paymentMethodMap].text }}
            </a-tag>
          </template>
          <template v-if="column.key === 'action'">
            <a-space>
              <a @click="handleView(record)">查看</a>
              <a-divider type="vertical" />
              <a v-if="record.status === 'pending'" @click="handleCancel(record)">取消</a>
              <a v-if="record.status === 'failed'" @click="handleRetry(record)">重试</a>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 退款详情弹窗 -->
    <a-modal v-model:open="showDetailModal" title="退款详情" width="800px" :footer="null">
      <div v-if="currentOrder" class="space-y-4">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="退款单号">{{ currentOrder.id }}</a-descriptions-item>
          <a-descriptions-item label="原订单号">{{ currentOrder.paymentOrderId }}</a-descriptions-item>
          <a-descriptions-item label="商户ID">{{ currentOrder.merchantId }}</a-descriptions-item>
          <a-descriptions-item label="商户名称">{{ currentOrder.merchantName }}</a-descriptions-item>
          <a-descriptions-item label="退款金额">
            <span class="font-medium text-red-500">¥{{ currentOrder.refundAmount.toFixed(2) }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="原订单金额">
            <span class="font-medium">¥{{ currentOrder.originalAmount.toFixed(2) }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="退款状态">
            <a-tag :color="statusMap[currentOrder.status as keyof typeof statusMap].color">
              {{ statusMap[currentOrder.status as keyof typeof statusMap].text }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="退款原因">{{ currentOrder.reason }}</a-descriptions-item>
          <a-descriptions-item label="支付方式">
            <a-tag>{{ paymentMethodMap[currentOrder.paymentMethod as keyof typeof paymentMethodMap].text }}</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="支付渠道">{{ currentOrder.paymentChannel }}</a-descriptions-item>
          <a-descriptions-item label="退款交易号">{{ currentOrder.refundTransactionId || '暂无' }}</a-descriptions-item>
          <a-descriptions-item label="创建时间">{{ currentOrder.createTime }}</a-descriptions-item>
          <a-descriptions-item label="更新时间">{{ currentOrder.updateTime }}</a-descriptions-item>
          <a-descriptions-item v-if="currentOrder.completedTime" label="完成时间">{{ currentOrder.completedTime }}</a-descriptions-item>
          <a-descriptions-item label="备注">{{ currentOrder.remark || '无' }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import {
  mockData,
  updateRefundOrder,
  statusMap,
  paymentMethodMap,
  type RefundOrder
} from './data'
import {
  SearchOutlined,
  ReloadOutlined,
} from '@ant-design/icons-vue'

const searchForm = reactive({
  id: '',
  paymentOrderId: '',
  merchantName: '',
  status: '',
  paymentMethod: '',
})

const columns = [
  { title: '退款单号', dataIndex: 'id', key: 'id', width: 180 },
  { title: '原订单号', dataIndex: 'paymentOrderId', key: 'paymentOrderId', width: 180 },
  { title: '商户名称', dataIndex: 'merchantName', key: 'merchantName', width: 150 },
  { title: '退款金额', dataIndex: 'refundAmount', key: 'refundAmount', width: 120 },
  { title: '原订单金额', dataIndex: 'originalAmount', key: 'originalAmount', width: 120 },
  { title: '退款状态', dataIndex: 'status', key: 'status', width: 100 },
  { title: '退款原因', dataIndex: 'reason', key: 'reason', width: 150 },
  { title: '支付方式', dataIndex: 'paymentMethod', key: 'paymentMethod', width: 120 },
  { title: '退款交易号', dataIndex: 'refundTransactionId', key: 'refundTransactionId', width: 180 },
  { title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 150 },
  { title: '操作', key: 'action', width: 120, fixed: 'right' },
]

const loading = ref(false)
const tableData = ref<RefundOrder[]>(mockData)
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: mockData.length,
})

const showDetailModal = ref(false)
const currentOrder = ref<RefundOrder | null>(null)

const handleSearch = () => {
  loading.value = true
  setTimeout(() => {
    const filtered = mockData.filter(item => {
      const idMatch = !searchForm.id || item.id.includes(searchForm.id)
      const paymentOrderIdMatch = !searchForm.paymentOrderId || item.paymentOrderId.includes(searchForm.paymentOrderId)
      const merchantMatch = !searchForm.merchantName || item.merchantName.includes(searchForm.merchantName)
      const statusMatch = !searchForm.status || item.status === searchForm.status
      const paymentMethodMatch = !searchForm.paymentMethod || item.paymentMethod === searchForm.paymentMethod
      return idMatch && paymentOrderIdMatch && merchantMatch && statusMatch && paymentMethodMatch
    })
    tableData.value = filtered
    pagination.total = filtered.length
    pagination.current = 1
    loading.value = false
  }, 500)
}

const handleReset = () => {
  searchForm.id = ''
  searchForm.paymentOrderId = ''
  searchForm.merchantName = ''
  searchForm.status = ''
  searchForm.paymentMethod = ''
  tableData.value = mockData
  pagination.total = mockData.length
  pagination.current = 1
}

const handleTableChange = (pag: any) => {
  pagination.current = pag.current
  pagination.pageSize = pag.pageSize
}

const handleView = (record: RefundOrder) => {
  currentOrder.value = record
  showDetailModal.value = true
}

const handleCancel = (record: RefundOrder) => {
  updateRefundOrder(record.id, {
    status: 'cancelled',
    updateTime: new Date().toLocaleString()
  })
  message.success('退款已取消')
  handleSearch()
}

const handleRetry = (record: RefundOrder) => {
  updateRefundOrder(record.id, {
    status: 'pending',
    updateTime: new Date().toLocaleString()
  })
  message.success('退款已重试')
  handleSearch()
}
</script>

<style scoped>
.ant-table-wrapper {
  overflow-x: auto;
}
</style>